import React from 'react';
import { Layout, Menu, Button, Divider } from 'antd';
import { Link, connect } from 'umi';
import logo from '../../assets/logo.png';
import p_zone from '../../assets/zone.png';
import cap from '../../assets/cap.png';
import BarCharts from '../../components/bar';
import AlertReason from '../../components/AlertReason';
import ScatterCharts from '../../components/scatter';
import OnlineCharts from '../../components/online';
import Xcryzs from '../../components/xcryzs';
import Ydgjxx from '../../components/Ydgjxx';
import Line1 from '../../components/Line1';
import Line2 from '../../components/Line2';
import Line3 from '../../components/Line3';
import Scan from '../../components/Scan';
import TabsControl from '../../layouts/TabsControl';
const { Header, Content, Footer } = Layout;

function BasicLayout(props: any) {
  const logout = () => {
    props.dispatch({
      type: 'login/logout',
    });
  };

  function home() {
    window.location.href = '/zone';
  }

  function area() {
    window.location.href = '/area';
  }

  return (
    <Layout style={{ height: '100%', fontFamily: 'global' }}>
      <Header style={{ height: '80px', lineHeight: '40px' }}>
        <Content>
          <table style={{ height: '60px', marginLeft: '30%' }}>
            <tr style={{ height: '60px' }}>
              <td style={{ width: '120px', height: '60px' }}>
                <img
                  src={logo}
                  style={{ width: '80px', cursor: 'unset', height: '80px' }}
                />
              </td>
              <td style={{ height: '60px' }}>
                <div
                  style={{
                    height: '27px',
                    fontSize: '27px',
                    lineHeight: '27px',
                    textAlign: 'center',
                    color: 'white',
                  }}
                >
                  深圳外环高速10标段金沙互通工程段
                </div>
                <div
                  style={{
                    height: '27px',
                    fontSize: '27px',
                    lineHeight: '27px',
                    textAlign: 'center',
                    color: 'white',
                  }}
                >
                  施工安全管理大数据中心
                </div>
              </td>
            </tr>
          </table>
        </Content>
        <Button
          style={{ position: 'fixed', right: '20px', top: '15px' }}
          onClick={logout}
        >
          退出
        </Button>
        {/* <Menu.Item>
            <Button onClick={logout}>Logout</Button>
          </Menu.Item> */}
      </Header>
      <Content
        style={{ padding: '0 20px', height: '100%', background: '#322c2b' }}
      >
        <table style={{ width: '100%', height: '70%', padding: 0 }}>
          <tr style={{ height: '33%' }}>
            <td style={{ width: '25%' }}>
              <div
                className="BoxWrap"
                style={{ height: '100%', width: '100%' }}
              >
                <div className="horn">
                  <div className="lt"></div>
                  <div className="rt"></div>
                  <div className="rb"></div>
                  <div className="lb"></div>
                  <div style={{ height: '100%', width: '100%' }}>
                    <Line1></Line1>
                  </div>
                  <div
                    style={{
                      top: '-5%',
                      left: '20%',
                      lineHeight: '30px',
                      textAlign: 'center',
                      background: '#3054a4',
                      color: 'white',
                      width: '60%',
                      height: '30px',
                      fontSize: '18px',
                    }}
                  >
                    未戴安全帽
                  </div>
                </div>
              </div>
            </td>
            <td style={{ width: '50%' }} rowSpan={3}>
              <div
                style={{
                  width: '50vw',
                  height: '30vw',
                  alignContent: 'center',
                  lineHeight: '100%',
                  alignItems: 'center',
                }}
              >
                <img
                  src={p_zone}
                  width="100%"
                  height="100%"
                  onClick={area}
                  style={{ cursor: 'hand', display: 'inline' }}
                />
              </div>
            </td>
            <td style={{ width: '25%' }}>
              <div
                className="BoxWrap"
                style={{ height: '100%', width: '100%' }}
              >
                <div className="horn">
                  <div className="lt"></div>
                  <div className="rt"></div>
                  <div className="rb"></div>
                  <div className="lb"></div>
                  <div style={{ height: '100%', width: '100%' }}>
                    <OnlineCharts></OnlineCharts>
                  </div>
                  <div
                    style={{
                      top: '-5%',
                      left: '20%',
                      lineHeight: '30px',
                      textAlign: 'center',
                      background: '#3054a4',
                      color: 'white',
                      width: '60%',
                      height: '30px',
                      fontSize: '18px',
                    }}
                  >
                    前端感知站点在线率
                  </div>
                </div>
              </div>
            </td>
          </tr>
          <tr style={{ height: '33%' }}>
            <td>
              <div
                className="BoxWrap"
                style={{ height: '100%', width: '100%' }}
              >
                <div className="horn">
                  <div className="lt"></div>
                  <div className="rt"></div>
                  <div className="rb"></div>
                  <div className="lb"></div>
                  <div style={{ height: '100%', width: '100%' }}>
                    <Line2></Line2>
                  </div>
                  <div
                    style={{
                      top: '-5%',
                      left: '20%',
                      lineHeight: '30px',
                      textAlign: 'center',
                      background: '#3054a4',
                      color: 'white',
                      width: '60%',
                      height: '30px',
                      fontSize: '18px',
                    }}
                  >
                    未系安全带
                  </div>
                </div>
              </div>
            </td>
            <td style={{ width: '25%' }}>
              <div
                className="BoxWrap"
                style={{ height: '100%', width: '100%' }}
              >
                <div className="horn">
                  <div className="lt"></div>
                  <div className="rt"></div>
                  <div className="rb"></div>
                  <div className="lb"></div>
                  <div style={{ height: '100%', width: '100%' }}>
                    <Scan></Scan>
                  </div>
                  <div
                    style={{
                      top: '-5%',
                      left: '20%',
                      lineHeight: '30px',
                      textAlign: 'center',
                      background: '#3054a4',
                      color: 'white',
                      width: '60%',
                      height: '30px',
                      fontSize: '18px',
                    }}
                  >
                    本周巡检数量
                  </div>
                </div>
              </div>
            </td>
          </tr>
          <tr style={{ height: '33%' }}>
            <td style={{ width: '25%' }}>
              <div
                className="BoxWrap"
                style={{ height: '100%', width: '100%' }}
              >
                <div className="horn">
                  <div className="lt"></div>
                  <div className="rt"></div>
                  <div className="rb"></div>
                  <div className="lb"></div>
                  <div style={{ height: '100%', width: '100%' }}>
                    <Line3></Line3>
                  </div>
                  <div
                    style={{
                      top: '-5%',
                      left: '20%',
                      lineHeight: '30px',
                      textAlign: 'center',
                      background: '#3054a4',
                      color: 'white',
                      width: '60%',
                      height: '30px',
                      fontSize: '18px',
                    }}
                  >
                    临边防护缺失
                  </div>
                </div>
              </div>
            </td>
            <td style={{ width: '25%' }}>
              <div
                className="BoxWrap"
                style={{ height: '100%', width: '100%' }}
              >
                <div className="horn">
                  <div className="lt"></div>
                  <div className="rt"></div>
                  <div className="rb"></div>
                  <div className="lb"></div>
                  <div style={{ height: '100%', width: '100%' }}>
                    <Xcryzs></Xcryzs>
                  </div>
                  <div
                    style={{
                      top: '-5%',
                      left: '20%',
                      lineHeight: '30px',
                      textAlign: 'center',
                      background: '#3054a4',
                      color: 'white',
                      width: '60%',
                      height: '30px',
                      fontSize: '18px',
                    }}
                  >
                    现场人员数量
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </table>
        <table style={{ width: '100%', height: '30%', padding: 0 }}>
          <tr>
            <td style={{ width: '25%' }}>
              <div
                className="BoxWrap"
                style={{ height: '100%', width: '100%' }}
              >
                <div className="horn">
                  <div className="lt"></div>
                  <div className="rt"></div>
                  <div className="rb"></div>
                  <div className="lb"></div>
                  <div style={{ height: '100%', width: '100%' }}>
                    <AlertReason></AlertReason>
                  </div>
                  <div
                    style={{
                      top: '-5%',
                      left: '20%',
                      lineHeight: '30px',
                      textAlign: 'center',
                      background: '#3054a4',
                      color: 'white',
                      width: '60%',
                      height: '30px',
                      fontSize: '18px',
                    }}
                  >
                    一周AI告警原因
                  </div>
                </div>
              </div>
            </td>
            <td style={{ width: '25%' }}>
              <div
                className="BoxWrap"
                style={{ height: '100%', width: '100%' }}
              >
                <div className="horn">
                  <div className="lt"></div>
                  <div className="rt"></div>
                  <div className="rb"></div>
                  <div className="lb"></div>
                  <div style={{ height: '100%', width: '100%' }}>
                    <ScatterCharts></ScatterCharts>
                  </div>
                  <div
                    style={{
                      top: '-5%',
                      left: '20%',
                      lineHeight: '30px',
                      textAlign: 'center',
                      background: '#3054a4',
                      color: 'white',
                      width: '60%',
                      height: '30px',
                      fontSize: '18px',
                    }}
                  >
                    分时告警信息
                  </div>
                </div>
              </div>
            </td>
            <td style={{ width: '25%' }}>
              <div
                className="BoxWrap"
                style={{ height: '100%', width: '100%' }}
              >
                <div className="horn">
                  <div className="lt"></div>
                  <div className="rt"></div>
                  <div className="rb"></div>
                  <div className="lb"></div>
                  <div style={{ height: '100%', width: '100%' }}>
                    <Ydgjxx></Ydgjxx>
                  </div>
                  <div
                    style={{
                      top: '-5%',
                      left: '20%',
                      lineHeight: '30px',
                      textAlign: 'center',
                      background: '#3054a4',
                      color: 'white',
                      width: '60%',
                      height: '30px',
                      fontSize: '18px',
                    }}
                  >
                    月度告警信息
                  </div>
                </div>
              </div>
            </td>
            <td style={{ width: '25%' }}>
              <div
                className="BoxWrap"
                style={{ height: '100%', width: '100%' }}
              >
                <div className="horn">
                  <div className="lt"></div>
                  <div className="rt"></div>
                  <div className="rb"></div>
                  <div className="lb"></div>
                  <div style={{ height: '100%', width: '100%' }}>
                    <BarCharts></BarCharts>
                  </div>
                  <div
                    style={{
                      top: '-5%',
                      left: '20%',
                      lineHeight: '30px',
                      textAlign: 'center',
                      background: '#3054a4',
                      color: 'white',
                      width: '60%',
                      height: '30px',
                      fontSize: '18px',
                    }}
                  >
                    一周AI告警数量
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </table>

        {props.children}
      </Content>
    </Layout>
  );
}

export default connect()(BasicLayout);
